<template>
  <div class="bi-checkbox">
    <el-checkbox-group
      @change="checkboxChange"
      v-if="props.checkboxList.length > 0"
      v-model="checkList"
    >
      <el-checkbox
        v-for="(item, index) in checkboxList"
        :key="index"
        :v-model="item[checkboxValue || 'value']"
        :label="item[checkboxLabel || 'label']"
        size="large"
      />
    </el-checkbox-group>
    <el-row :gutter="20" justify="end">
      <el-col :span="6"
        ><div class="grid-content ep-bg-purple" />
        <el-button size="small" @click="chackCancel">取消</el-button></el-col
      >
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-button type="primary" size="small" @click="checkDefine">
          确定</el-button
        ></el-col
      >
    </el-row>
  </div>
</template>
<script setup>
import { ref } from "vue";
const checkList = ref([]);
const props = defineProps({
  checkboxList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  checkboxLabel: {
    type: String,
  },
  checkboxValue: {
    type: String,
  },
});
const emit = defineEmits(["handelCheckDefine", "handelChackCancel"]);
const checkboxChange = () => {
  console.log(checkList.value);
};
const checkDefine = () => {
  emit("handelCheckDefine", checkList.value);
};
const chackCancel = () => {
  checkList.value = [];
  emit("handelChackCancel");
};
</script>